<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/mqttws31.js"></script>
    <script>
        // Create a client instance
        var client = new Paho.MQTT.Client("172.17.149.194", 8083, "javascript"+Math.random());

        // set callback handlers
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;
        client.onMessageDelivered = onMessageDelivered;

        // connect the client
        client.connect({
            userName: 'test',
            password: 'test',
            cleanSession: false,
            onSuccess: onConnect
        });

        // called when the client connects
        function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.info("onConnect");
            client.subscribe("/World");
        }

        // called when the client loses its connection
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.info("onConnectionLost:" + responseObject.errorMessage);
            }
        }

        function onMessageDelivered(){
            console.info('deliver....')
        }

        // called when a message arrives
        function onMessageArrived(message) {
            document.getElementById("chatlog").textContent += message.payloadString + "\n";
            console.info("onMessageArrived:" + message.payloadString);
        }

        function postToServer() {
            console.info("send", document.getElementById("msg").value);
            var message = new Paho.MQTT.Message(document.getElementById("msg").value);
            message.destinationName = "/World";
            client.send(message);
        }

    </script>
</head>
<body>
<textarea id="chatlog" readonly rows="10" cols="50"></textarea><br/>
<input id="msg" type="text"/>
<select id="house">
    <option value=1>房间1</option>
    <option selected="selected" value=2>房间2</option>
</select>
<button onClick="postToServer()">Send</button>
<button onClick="closeConnect()">End</button>
</body>
</html>